import Vue from "vue"
import VueRouter from "vue-router"
 

import Home from '../pages/Home.vue'
import Login from '../pages/Login.vue'
import  Detail from "../pages/Detail.vue";
//二级路由
import Homes from '../pages/home/Homes.vue'
import List from '../pages/home/List.vue'
import Server from '../pages/home/Server.vue'
import My from '../pages/home/My.vue'
Vue.use(VueRouter)

const router = new VueRouter({
  mode:'history',
  routes: [
    {
    // 重定向
      path: "/",
      redirect:'/home'
    },
    {
      path: '/home',
      component: Home,

      children: [
        {
          //二级重定向 进来以后的链接直接就是: http://localhost:8080/home/homes
          path: "/home",
          redirect:"/home/homes"
        },
        { 
          path: "homes",
          component:Homes 
        },
        { 
           path: "list",
           component:List 
         },
        { 
          path: "server",
          component:Server
        },
        {
          path: "my",
          component: My

        }   
     ]
    },

    {
      path: '/login',
      component:Login
    },
    {
      path: '/detail',
      component:Detail
    },
    
  ]
})
// 全局进入页面前拦截
// beforeEach(callback) 
// to 去往的页面 from 从哪个页面来 
// next  执行下一步必须调用next才能访问到下一个页面
router.beforeEach((to, from, next) => {
  if (to.path === "/home/my" && !sessionStorage.getItem('token')) {
    // this.$router === 路由实例  52 53两行写法等价
    // router.push("/login")  不是最简单的
    // 拦截 进入登陆页
    next("/login")
  } else {
    ///无需拦截,进入下一页面
    next()
  }
  
})
// 全局进入页面之后拦截
/* router.afterEach((to, from) => {
  console.log("进入页面了");
  console.log(to);
}) 用的很少
 */
export default router 